<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>塗四格</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" href="static/global.css" />
</head>
<body>
<div id="header"></div>
<div id="wrap">
	<div id="workshop">
		<div id="comic" class="can_stage">
			<div id="first" class="can">
				<canvas id="first_scene" width="220" height="220"></canvas>
				<canvas id="first_role" width="220" height="220"></canvas>
				<canvas id="first_bubble" width="220" height="220"></canvas>
				<canvas id="first_text" width="220" height="220"></canvas>
			</div>
			<div id="second" class="can">
				<canvas id="second_scene" width="220" height="220"></canvas>
				<canvas id="second_role" width="220" height="220"></canvas>
				<canvas id="second_bubble" width="220" height="220"></canvas>
				<canvas id="second_text" width="220" height="220"></canvas>
			</div>
			<div id="third" class="can">
				<canvas id="third_scene" width="220" height="220"></canvas>
				<canvas id="third_role" width="220" height="220"></canvas>
				<canvas id="third_bubble" width="220" height="220"></canvas>
				<canvas id="third_text" width="220" height="220"></canvas>
			</div>
			<div id="fourth" class="can">
				<canvas id="fourth_scene" width="220" height="220"></canvas>
				<canvas id="fourth_role" width="220" height="220"></canvas>
				<canvas id="fourth_bubble" width="220" height="220"></canvas>
				<canvas id="fourth_text" width="220" height="220"></canvas>
			</div>
		</div>
		<div id="setting" class="setting_panel">
			<form>
				<div class="tabs">
					<a href="##" class="current">第一步：選擇場景</a>
					<a href="##">第二步：設計對白</a>
				</div>
				<div class="conts">
					<div class="cont current">
						<ul class="list">
							<li class="selected"><figure><a href="##"><img src="static/img/icon.png" alt="" /></a><figcaption><a href="##">場景一</a></figcaption></figure></li>
							<li><figure><a href="##"><img src="static/img/icon.png" alt="" /></a><figcaption><a href="##">場景二</a></figcaption></figure></li>
							<li><figure><a href="##"><img src="static/img/icon.png" alt="" /></a><figcaption><a href="##">場景三</a></figcaption></figure></li>
							<li><figure><a href="##"><img src="static/img/icon.png" alt="" /></a><figcaption><a href="##">場景四</a></figcaption></figure></li>
							<li><figure><a href="##"><img src="static/img/icon.png" alt="" /></a><figcaption><a href="##">場景五</a></figcaption></figure></li>
							<li><figure><a href="##"><img src="static/img/icon.png" alt="" /></a><figcaption><a href="##">場景六</a></figcaption></figure></li>
							<li><figure><a href="##"><img src="static/img/icon.png" alt="" /></a><figcaption><a href="##">場景七</a></figcaption></figure></li>
							<li><figure><a href="##"><img src="static/img/icon.png" alt="" /></a><figcaption><a href="##">場景八</a></figcaption></figure></li>
							<li><figure><a href="##"><img src="static/img/icon.png" alt="" /></a><figcaption><a href="##">場景⑨</a></figcaption></figure></li>
						</ul>
					</div>
					<div class="cont">
						<div class="text">
							<p class="style">文字大小：<select><option>較小</option><option selected="selected">中等</option><option>較大</option><option>極大</option></select>顏色：<select><option selected="selected">黑色</option><option>紅色</option><option>藍色</option></select></p>
							<p><label class="label">第一格文字：</label><input type="text" class="textbox" style="display:none" /><textarea class="textbox"></textarea></p>
							<p><label class="label">第二格文字：</label><input type="text" class="textbox" /><textarea class="textbox" style="display:none"></textarea></p>
							<p><label class="label">第三格文字：</label><input type="text" class="textbox" /><textarea class="textbox" style="display:none"></textarea></p>
							<p><label class="label">第四格文字：</label><input type="text" class="textbox" /><textarea class="textbox" style="display:none"></textarea></p>
						</div>
					</div>
				</div>
				<button type="submit" class="create_4koma">生成漫畫</button>
			</form>
		</div>
	</div>
</div>
<div id="footer"></div>
<script src="static/script.js"></script>
<script>
//extra
Element.prototype.hasClassName = function(_className) {
  return new RegExp("(?:^|\\s+)" + _className + "(?:\\s+|$)").test(this.className);
};
Element.prototype.addClassName = function(_className) {
  if (!this.hasClassName(_className)) {
    this.className = this.className ? [this.className, _className].join(' ') : _className;
  }
};
Element.prototype.removeClassName = function(_className) {
  if (this.hasClassName(_className)) {
    var c = this.className;
    this.className = c.replace(new RegExp("(?:^|\\s+)" + _className + "(?:\\s+|$)", "g"), "");
  }
};
//tabs
(function(){
	var setting = document.getElementById('setting');
	var tabs = setting.querySelectorAll('.tabs a');
	var conts = setting.querySelectorAll('.conts .cont');
	var switchCont = function(_e){
		_e.preventDefault();
		if(!this.hasClassName('current')){
			this.addClassName('current');
			for(var _i=0;_i<tabs.length;_i++){
				if(tabs[_i]==this){
					conts[_i].addClassName('current');
				}else{
					tabs[_i].removeClassName('current');
					conts[_i].removeClassName('current');
				}
			}
		}
	};
	for(var _i=0;_i<tabs.length;_i++){
		tabs[_i].addEventListener('click',switchCont);
	}
})();
//textbox focus
(function(){
	var textboxes = document.querySelectorAll('#setting .conts .text .textbox');
	var changeBigbox = function(){
		var _sign = [], _current;
		for(var _i=0;_i<textboxes.length;_i++){
			if(textboxes[_i] == this){
				if(this.tagName.toLowerCase() == 'textarea') return;
				_current = _i+1;
				_sign.push(_i);
				_sign.push(_i+1);
			}else if(textboxes[_i].tagName.toLowerCase() == 'textarea' && textboxes[_i].style.display.toLowerCase() != 'none'){
				textboxes[_i-1].value = textboxes[_i].value;
				_sign.push(_i);
				_sign.push(_i-1);
			}
		}
		while(_sign.length>0){
			var _el = textboxes[_sign.shift()];
			_el.style.display = _el.style.display.toLowerCase() == 'none' ? '' : 'none';
		}
		textboxes[_current].focus();
	}
	for(var _i=0;_i<textboxes.length;_i++){
		textboxes[_i].addEventListener('focus',changeBigbox);
	}
})();
//join canvas
(function(){
	function getC(_id){return document.getElementById(_id);}
	function defC(_c){_c.ctx=_c.getContext('2d');}
	function creO(_scene,_role,_bubble,_text){defC(this.scene=getC(_scene));defC(this.role=getC(_role));defC(this.bubble=getC(_bubble));defC(this.text=getC(_text));}
	creO.prototype.join = function(){var _c=document.createElement('canvas');defC(_c);_c.ctx.drawImage(this.scene,0,0);_c.ctx.drawImage(this.role,0,0);_c.ctx.drawImage(this.bubble,0,0);_c.ctx.drawImage(this.text,0,0);return _c;}
	var btn = document.querySelector('#setting .create_4koma');
	var stage = [new creO('first_scene','first_role','first_bubble','first_text'),new creO('second_scene','second_role','second_bubble','second_text'),new creO('third_scene','third_role','third_bubble','third_text'),new creO('fourth_scene','fourth_role','fourth_bubble','fourth_text')];
	var createBigCanvas = function(_e){
		_e.preventDefault();
		var bigCanvas = document.createElement('canvas');
		defC(bigCanvas);
		bigCanvas.width = 455;
		bigCanvas.height = 500;
		bigCanvas.ctx.fillStyle='rgb(0,0,0)';
		bigCanvas.ctx.fillRect(0,0,bigCanvas.width,bigCanvas.height);
		bigCanvas.ctx.drawImage(stage[0].join(),5,5);
		bigCanvas.ctx.drawImage(stage[1].join(),230,5);
		bigCanvas.ctx.drawImage(stage[2].join(),5,230);
		bigCanvas.ctx.drawImage(stage[3].join(),230,230);
		window.open(bigCanvas.toDataURL('image/png'));
	}
	btn.addEventListener('click',createBigCanvas,false);
})();
</script>
</body>
</html>
